<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="./js/app-websocket.js"></script>
    <script src="./js/request.js"></script>
</head>
<body onload="loadData()">
<div class="container" id="main-content" style="margin-top: 10px;">
    </br>
    <div class="row">
        <div class="col-md-6">
            <form class="form-horizontal" style="margin-left:0px">
                <div class="form-group">
                    <label class="col-sm-4 control-label">欢迎您: </label>
                    <div class="col-sm-8">
                        <input class="form-control" id="userName" placeholder="Guest" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">WebSocket连接: </label>
                    <div class="col-sm-8">
                        <!--<button class="btn btn-primary" onclick="connect();" type="button">连接</button>-->
                        <button class="btn btn-danger" onclick="disconnect();" type="button">断开</button>
                    </div>
                </div>
                <!--                <div class="form-group">-->
                <!--                    <label class="col-sm-4 control-label">订阅地址：</label>-->
                <!--                    <div class="col-sm-2">-->
                <!--                        <button class="btn btn-warning" onclick="subscribeSocket();" type="button">订阅</button>-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="form-group">
                    <label class="col-sm-4 control-label">接收用户：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="receiveUser" placeholder="接收用户"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label">消息内容：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="content" placeholder="消息内容" type="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="col-sm-offset-4 col-sm-8">
                            <button class="btn btn-info" onclick="sendMessageNoParameter();" type="button">发送</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-6" style="margin-left:0px">
            <label class="control-label">在线用户(点击用户发送消息) </label>
            <div class="list-group" id="user-list">
                <button class="list-group-item user-list" onclick="selectUser('test')" type="button">Cras justo odio
                </button>
                <button class="list-group-item user-list" onclick="selectUser('test')" type="button">Dapibus ac
                    facilisis in
                </button>
                <button class="list-group-item user-list" onclick="selectUser('test')" type="button">Morbi leo risus
                </button>
                <button class="list-group-item user-list" onclick="selectUser('test')" type="button">Porta ac
                    consectetur ac
                </button>
                <button class="list-group-item user-list" onclick="selectUser('test')" type="button">Vestibulum at
                    eros
                </button>
            </div>
        </div>
    </div>
    </br>

    <div class="row">
        <div class="col-md-6">
            <h5 class="page-header" style="font-weight:bold">公共消息：</h5>
            <table class="table table-striped">
                <tbody id="public-information"></tbody>
            </table>
        </div>
        <div class="col-md-6">
            <h5 class="page-header" style="font-weight:bold">私有消息：</h5>
            <table class="table table-striped">
                <tbody id="private-information"></tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>